<template>
  <div
    class="fabody"
    ref="fabody"
    style="background: rgba(0, 0, 0, 0.2); height: 100%; position: relative"
  >
    <a-modal
      :mask="false"
      :closable="false"
      :visible="true"
      title="设置日期"
      :maskClosable="false"
      :keyboard="false"
      width="650px"
      :bodyStyle="{ minHeight: '300px' }"
      :getContainer="() => $refs.fabody"
    >
      <a-form :form="form">
        <!--分开写日期-->
        <a-row :gutter="20">
          <a-col :span="12">
            <a-form-item
              label="开始日期"
              :colon="false"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
            >
              <a-date-picker
                format="YYYY-MM-DD"
                v-decorator="['startDate', config]"
                :disabledDate="disabledStartDate"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="结束日期"
              :colon="false"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
            >
              <a-date-picker
                format="YYYY-MM-DD"
                v-decorator="['endDate', config]"
                :disabledDate="disabledEndDate"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-radio-group v-model="isEnable" @change="onChange" :default-value="1">
          <span style="margin: 0 10px">是否启用</span>
          <a-radio :value="0"> 不启用 </a-radio>
          <a-radio :value="1"> 启用 </a-radio>
        </a-radio-group>

        <div style="min-height: 200px; margin-top: 20px">
          <!--<sidebar-role-->
          <!--ref="roleMainTree"-->
          <!--:checkable="true"-->
          <!--@on-select="roleMainTreeSelect"-->
          <!--@on-check="roleMainTreeCheck"-->
          <!--:heightTree="{'height':'180px'}"-->
          <!--&gt;</sidebar-role>-->

          <sidebar-menu
            ref="menuMainTree"
            :checkable="true"
            @on-check="roleMainTreeCheck"
            @on-select="roleMainTreeSelect"
            :heightTree="{ height: '180px' }"
            :checkedKeys.sync="areaId"
            :checkedKey="areaId"
          />
        </div>
      </a-form>
      <template slot="footer">
        <a-button
          key="submit"
          type="primary"
          :loading="confirmLoading"
          @click="handleOk"
        >
          保 存
        </a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import timePeriodConfigApi from "@/api/visitorSystem/timePeriodConfig";
import sidebarRole from "@/components/sidebarRole.vue";
import sidebarMenu from "@/components/accessControlSystem/sidebarMenu.vue";

export default {
  components: {
    sidebarRole,
    sidebarMenu,
  },
  name: "",
  data() {
    return {
      startDate: "",
      endDate: "",
      form: this.$form.createForm(this, { name: "coordinated" }),
      confirmLoading: false,
      config: {
        rules: [{ type: "object", required: true, message: "请选择一个日期" }],
      },
      isEnable: 0,
      configId: "",
      areaId: [],
    };
  },
  beforeMount() {
    this.startDate = moment().startOf("month");
    this.endDate = moment().endOf("month");
  },
  mounted() {
    this.getApprovalPeople();
  },
  methods: {
    async getApprovalPeople() {
      let res = await timePeriodConfigApi.getApprovalConfig();
      console.log(res.data);
      if (res.data.success) {
        let configInfo = res.data.result;
        if (res.data.result.areaIds == null) {
          this.areaId = [];
        } else {
          this.areaId = res.data.result.areaIds.split(",");
        }

        this.form.setFieldsValue({
          startDate: moment(configInfo.beginDate, "YYYY-MM-DD"),
          endDate: moment(configInfo.endDate, "YYYY-MM-DD"),
        });
        this.isEnable = configInfo.isOpen;
        this.configId = configInfo.configId;
      } else {
        this.$message.error(res.data.message);
      }
    },
    disabledStartDate(startDate) {
      const endDate = this.endDate;
      if (!startDate || !endDate) {
        return false;
      }
      return startDate.valueOf() > endDate.valueOf();
    },
    disabledEndDate(endDate) {
      const startDate = this.startDate;
      if (!endDate || !startDate) {
        return false;
      }
      return startDate.valueOf() >= endDate.valueOf();
    },
    handleOk() {
      let _this = this;
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          console.log(moment(values.startDate).format("YYYY-MM-DD"));
          _this.confirmLoading = true;
          timePeriodConfigApi
            .saveApprovalConfig({
              configId: _this.configId, //修改必传，第一次新增默认传空
              isOpen: _this.isEnable, //是否启动  0不启动  1启动
              beginDate: moment(values.startDate).format("YYYY-MM-DD"), //开始日期
              endDate: moment(values.endDate).format("YYYY-MM-DD"), //结束日期
              areaIds:this.areaId.join(",")//区域id们
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.success) {
                setTimeout(function () {
                  _this.confirmLoading = false;
                  _this.$message.success("保存成功！");
                }, 1000);
              } else {
                _this.confirmLoading = false;
                _this.$message.error(res.data.message);
              }
            });
        }
      });
    },
    onChange(e) {
      console.log("radio checked", e.target.value);
    },
    roleMainTreeSelect(v) {
      console.log(v);
      this.areaId = v;
    },
    roleMainTreeCheck(v) {
      console.log(v);
      this.areaId = v;
    },
  },
};
</script>

<style>
.fabody .ant-modal-wrap {
  position: absolute;
}
</style>
